<template>
  <div class="stock-opt-wrapper">
    <div class="content">
      <div class="top">
        <div class="left">
          <Input ref="searchInpur" placeholder="请输入商品/货号" class="input-cls" @search="handleSearch" />
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="分类筛选：">
              <el-select v-model="value" clearable placeholder="全部" @change="handleChange">
                <el-option
                  v-for="item of classicList"
                  :key="item.id"
                  :label="item.kind_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <el-table :data="list" style="width: 100%">

          <el-table-column prop="item_no" label="货号">
            <template slot-scope="scope">
              <div style="height: 50px">
                <el-badge v-if="scope.row.inventory < scope.row.inventory_caution" value="库存预警" class="item">
                  
                </el-badge>
                <span style="display: block; margin-top: 5px; width: 150px;margin-left:60px">{{ scope.row.item_no }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="img_show" label="图片" width>
            <template slot-scope="scope">
              <div>
                <el-avatar shape="square" :size="50" :src="scope.row.img_show" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width />

          <el-table-column prop="inventory" label="库存" width />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <span class="withdraw" @click="enter(scope)">入库</span>
              <span class="withdraw" @click="out(scope)">出库</span>
              <span class="record" @click="record(scope)">记录</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Pagination class="pagination" :page-size="pageSize" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
    <in-out
      ref="inOut"
      :title="title"
      :stock-name="stockName"
      @confirm="hanldeConfirm"
    />
    <Record :id="id" ref="record" />
  </div>
</template>
<script>
import Input from '@/common/input'
import InOut from './stockOpt/inOut'
import Record from './stockOpt/record'
import Pagination from '@/common/pagination'
import { getStockList, addStock, reduceStock } from '@/api/stock'
import { getClassificationList } from '@/api/goods'
const ERR_OK = 200
export default {
  components: {
    Input,
    InOut,
    Record,
    Pagination
  },
  data() {
    return {
      title: '一键入库',
      stockName: '入库数量',
      formInline: {
        goods: ''
      },
      tableData: [
        {
          no: '41545',
          img:
            'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
          name: '韩韩',
          count: 1523
        },
        {
          no: '41545',
          img:
            'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
          name: '韩韩',
          count: 1523
        }
      ],
      value: '',
      classicList: [],
      list: [],
      page: 1,
      total: 0,
      pageSize: 9,
      currentPage: 0,
      query: '',
      kind: '',
      id: ''
    }
  },
  mounted() {
    this._getClassificationList()
      .then(res => {
        this._getStockList({})
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    handleNextPage(page) {
      this.page = page
      this._getStockList({ condition: this.query, page: this.page, kind: this.kind })
    },
    handleSearch(query) {
      this.query = query
      this.page = 1
      this.currentPage = 1
      this._getStockList({ condition: this.query, page: this.page, kind: this.kind })
    },
    handleChange(kind) {
      this.clearInput()
      this.page = 1
      this.currentPage = 1
      this.kind = kind
      this._getStockList({ condition: this.query, page: this.page, kind })
    },
    hanldeConfirm(params) {
      params.id = this.id
      switch (this.title) {
        case '一键入库':
          this._addStock(params)
            .then(() => {
              this.increaseCount(this.id, params.number)
            })
          break
        case '一键出库':
          this._reduceStock(params)
            .then(() => {
              this.increaseCount(this.id, -params.number)
            })
          break
      }
    },
    increaseCount(id, number) {
      const fIndex = this.list.findIndex((item, index) => {
        return item.id === id
      })
      if (fIndex >= 0) {
        this.list[fIndex].inventory = parseInt(this.list[fIndex].inventory) + parseInt(number)
      }
    },
    enter(scope) {
      this.title = '一键入库'
      this.stockName = '入库数量'
      this.$refs.inOut.show()
      this.id = scope.row.id
    },
    out(scope) {
      this.title = '一键出库'
      this.stockName = '出库数量'
      this.$refs.inOut.show()
      this.id = scope.row.id
    },
    record(scope) {
      this.$refs.record.show()
      this.id = scope.row.id
    },
    clearInput() {
      this.$refs.searchInpur.clear()
    },
    _replaceKey(arr, oldKey, newKey) {
      arr.forEach((item, index) => {
        while (item[oldKey]) {
          item[newKey] = item[oldKey]
          delete item[oldKey]
        }
      })
      return arr
    },
    _getStockList({ condition, page, kind }) {
      getStockList({ condition, page, kind })
        .then(res => {
          if (res.code === ERR_OK) {
            this.list = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getClassificationList() {
      return new Promise((resolve, reject) => {
        getClassificationList()
          .then(res => {
            if (res.code === ERR_OK) {
              // this.classicList = this._replaceKey(res.data, 'lower', 'children')
              this.classicList = res.data
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    },
    _addStock({ id, number, message }) {
      return new Promise((resolve, reject) => {
        addStock({ id, number, message })
          .then(res => {
            if (res.code === ERR_OK) {
              this._success(res)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            this._warning(err)
            reject()
          })
      })
    },
    _reduceStock({ id, number, message }) {
      return new Promise((resolve, reject) => {
        reduceStock({ id, number, message })
          .then(res => {
            if (res.code === ERR_OK) {
              this._success(res)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            this._warning(err)
            reject()
          })
      })
    },
    _success(res) {
      this.$message({
        message: res.message,
        type: 'success'
      })
    },
    _warning(res) {
      this.$message({
        message: res.message,
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.stock-opt-wrapper{
  min-height:105vh;
}
.content {
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .input-cls {
        margin-right: 23px;
      }
      .el-form-item {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
      }
    }
    .right {
      .el-button {
        color: #fff;
        height: 40px;
        width: 87px;
      }
    }
  }
  .bottom {
    margin-top: 20px;
  }
}

.el-table /deep/ .cell {
  .withdraw,
  .record {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .record {
    color: #1baab0;
  }
}
.item {
  margin-top: 10px;
  margin-right: 40px;
  position: relative;
 /deep/ .el-badge__content{
    position: absolute;
    top: -3px !important;
    left: -94px !important;
    right: auto;
  }
}
</style>
